import React, { useEffect, useState } from 'react'
import axios from '../services'
import { Swiper, ShareSheet, ActionBar,Toast  } from 'react-vant';
import '../css/ProductDetail.css'
import { ShareO, Revoke, CartO, ChatO, Star } from '@react-vant/icons';
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
]
export default function ProductDetail(props) {
    let objUrl = new URLSearchParams(props.location.search)
    useEffect(() => {
        axios.get('/goods/detail?id=' + objUrl.get('id')).then(res => {
            setData(res.data)
        })
    }, [])
    const [data, setData] = useState({})
    const [visible, setVisible] = useState(false)
    return Object.keys(data).length === 0 ? null : (
        <div id='productDetail202210052101'>
            <div className="demo-swiper productDetail" style={{ height: '375px' }}>
                <Swiper
                    className='PDswiper' autoplay={false}>
                    {
                        data.gallery.map(item => <Swiper.Item key={item.id}>
                            <img style={{ width: '100%', display: 'block', border: "0" }} src={item.img_url} />

                        </Swiper.Item>)
                    }
                </Swiper>
            </div>
            <ShareO onClick={() => setVisible(true)} />
            <Revoke onClick={() => {
                props.history.push('/home/searchPopup')
            }} />
            <div className='demo-action-bar'>
                <ActionBar>
                    <ActionBar.Icon icon={<Star color='red' />} text='店铺' />
                    <ActionBar.Icon onClick={() => {
                        props.history.push('/cart')
                    }} icon={<CartO color='red' />} text='购物车' />
                    <ActionBar.Button type='warning' text='加入购物车'
                        onClick={() => {
                            axios.post('/cart/add', {
                                goodsId: objUrl.get('id'),
                                number: 1,
                                productId: data.productList[0].id
                            }).then(res=>{
                                if(res.errno===0){
                                    Toast.success('添加成功')
                                }
                                else{
                                    Toast.fail(res.errmsg)
                                }
                            })
                        }}
                    />
                    <ActionBar.Button type='danger' text='立即购买' />
                </ActionBar>
            </div>
            
            <ShareSheet
                visible={visible}
                options={options}
                title='立即分享给好友'
                onCancel={() => setVisible(false)}
                onSelect={(option, index) => {
                    console.log('option', option)
                    console.log('index', index)
                    setVisible(false)
                }}
            />
        </div>)
}
